<admintpl file="header" />
<style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>

<body>
  <div style="text-align:center;margin: 5px;">
      查询时间：
      <input type="text" class="js-date" id="start_time" name="formget[start_time]" value="{$formget.start_time|default=''}" style="width: 90px; height:30px;" autocomplete="off">-
      <input type="text" class="js-date" id="end_time" name="formget[end_time]" value="{$formget.end_time}" style="width: 90px; height:30px;" autocomplete="off">
      <input type="button" name="refresh" class="btn btn-primary" value="搜索" onclick="pn_online_list()">
  </div>
<div id="allmap">

</div>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=OkM4ci06ibVrimvizgsIWv0sjASIa7BK&s=1"></script>
<script type="text/javascript" src="__PUBLIC__/js/Heatmap_min.js"></script>
  <script src="__PUBLIC__/js/common.js"></script>
<script type="text/javascript">

//ceshiceshi
    // 百度地图API功能
    var map = new BMap.Map("allmap");

    map.disableDoubleClickZoom(true);
    map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();

map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));


//    var myIcon2 = new BMap.Icon("__PUBLIC__/images/start.png", new BMap.Size(35, 35));
//    var myIcon3 = new BMap.Icon("__PUBLIC__/images/end.png", new BMap.Size(35, 35));
    if(!isSupportCanval()){
        alert('热力图目前只支持canvas支持的浏览器，您所使用的浏览器不能使用热力图功能~');
    }
    //参数说明如下:
    /* visible 热力图是否显示,默认为true
     * opacity 热力的透明度,1-100
     * radius 势力图的每个点的半径大小
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *	{
     .2:'rgb(0, 255, 255)',
     .5:'rgb(0, 110, 255)',
     .8:'rgb(100, 0, 255)'
     }
     其中 key 表示插值的位置, 0~1.
     value 为颜色值.
     */

function setGradient() {
    /*格式如下所示：
    {
        0:'rgb(102,255,0)',
        5:'rgb(255,170,0)',
        1:'rgb(255,0,0)'
    }
     */
    var gradient = {};
    var colors = document.querySelectorAll("input[type='color']");
    colors= [].slice.call(colors,0);
    colors.forEach(function (ele){
        gradient[ele.getAttribute('data-key')]=ele.value;
    });
    heatmapOverlay.setOptions({'gradient':gradient});
}
function isSupportCanval() {
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
}

    pnRobRouteCounts("","");
    function pnRobRouteCounts(start_time,end_time) {
        $.ajax({
            type: "GET",
            async: true,
            url: "{:U('Runmenanalysis/bill_order')}",
            data:"formget[start_time]="+start_time+"&formget[end_time]="+end_time,
            dataType: "json",
            success: function(data) {
                console.log("// 数据：");
                console.log(data);
                map.clearOverlays();
                heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});

                map.addOverlay(heatmapOverlay);

                heatmapOverlay.setDataSet({data:data});

//是否显示热力图
            }
        });
        var point = new BMap.Point(113.65,34.76);
        map.centerAndZoom(point, 13);
    }
//map.addEventListener('hotspotover', function(e){
    //console.log('点击坐标: ');
   // console.log(e.spots);
//    console.log(e.spots[0]['ib']['KB']['H']);
//});

function pn_online_list() {
    var start_time = $('#start_time').val();
    var end_time = $('#end_time').val();

    pnRobRouteCounts(start_time,end_time);
}
    function search_user() {
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        local.searchInBounds("银行", map.getBounds());

        map.addEventListener("dragend",function(){
            map.clearOverlays();
            local.searchInBounds("银行", map.getBounds());
        });
    }
</script>
</body>
</html>